<template>
  <div class="memberDetail">
    <section class="detail-wrapper">
      <ul class="detail">
        <li class="item">
          <div class="content">
            <span class="project">姓名</span>
            <span class="info">{{currentMember.name}}</span>
          </div>
        </li>
        <li class="item">
          <div class="content">
            <span class="project">证件</span>
            <span class="info">大陆身份证</span>
          </div>
        </li>
        <li class="item">
          <div class="content">
            <span class="project">证件号</span>
            <span class="info">{{currentMember.cardNum}}</span>
          </div>
        </li>
        <li class="item">
          <div class="content">
            <span class="project">性别</span>
            <span class="info">{{currentMember.sex === 1 ? '男':'女'}}</span>
          </div>
        </li>
        <li class="item">
          <div class="content">
            <span class="project">生日</span>
            <span class="info">1994-11-04</span>
          </div>
        </li>
        <li class="item" @click="toChange({path:'',name: '选择地区',key: 'area'})">
          <div class="content">
            <span class="project">地区</span>
            <span class="info">{{currentMember.area}}<img src="../../../../static/img/right_gray_arrow.png"/></span>
          </div>
        </li>
        <li class="item" @click="toChange({path:'',name: '修改联系地址', key: 'address'})">
          <div class="content">
            <span class="project">联系地址</span>
            <span class="info">{{currentMember.address == '' ? '未填写': currentMember.address}}<img src="../../../../static/img/right_gray_arrow.png"/></span>
          </div>
        </li>
        <li class="item" @click="toChange({path:'',name: '修改手机号', key: 'phone'})">
          <div class="content">
            <span class="project">手机号</span>
            <span class="info">{{currentMember.phone}}<img src="../../../../static/img/right_gray_arrow.png"/></span>
          </div>
        </li>
        <li class="item" @click="toChange({path:'',name: '修改电子邮箱', key: 'email'})">
          <div class="content">
            <span class="project">邮箱</span>
            <span class="info">{{currentMember.email == '' ? '未填写': currentMember.email}}<img src="../../../../static/img/right_gray_arrow.png"/></span>
          </div>
        </li>
      </ul>
    </section>

    <section class="btn-wrapper">
      <p class="btn first" @click="_setDefault">设为默认就诊人</p>
      <p class="btn second" @click="_delFamily">删除该成员</p>
    </section>
    <transition name="changeInfo">
      <section class="changeBox" v-if="tochangeshow">
        <div class="input-wrapper">
          <input class="input" ref="inputText" v-model="changeText"/>
          <!--<input class="input" @keyup="handleKeyup" ref="inputText"/>-->
        </div>
        <p class="remind">（5-24个字）</p>
        <p class="btn btnActive" ref="changeBtn" @click="comfirmChange">确认修改</p>
        <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
      </section>
    </transition>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import {addClass,removeClass} from "../../../common/js/dom";
  import {ERR_OK} from "../../../api/config";
  import {delFamily,setDefault,updateFamily} from "../../../api/personal";
  import ErrorTip from "../../../components/errorTip/errorTip";

  export default {
    components: {ErrorTip},
    name: "member-detail",
    props: {
      familys: {
        type: Array,
        default: null
      }
    },
    data () {
      return {
        tochangeshow: false,
        currentMember: {},
        dialog: false,
        alertText: '',
        changeText: ''
      }
    },
    mounted () {
      this.setAddNewMember(false)
      this.findCurrentMember()
    },
    methods: {
      _delFamily () {
        delFamily(this.currentMember.id).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.$router.push({
                path: '/personal/familyMembers/'
              })
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      _setDefault () {
        setDefault(this.currentMember.id).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.alertText = response.msg
            this.dialog = true

            setTimeout(() => {
              this.$router.push({
                path: '/personal/familyMembers'
              })
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      comfirmChange () {
        updateFamily(this.id,this.key,this.changeText).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.alertText = response.msg
            this.dialog = true
            let vm = this
            setTimeout(() => {
              vm.alertText = response.msg
              vm.dialog = true
              // vm.$router.go(-1)
              vm.$router.push({
                path: '/personal/familyMembers'
              })
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      findCurrentMember () {
        let id = this.$route.params.id
        this.familys.forEach((item) => {
          if (item.id == id) {
            this.currentMember = item
            return
          }
        })
      },
      handleKeyup () {
        let text = this.$refs.inputText.value
        let length = text.length
        if (length >=5) {
          addClass(this.$refs.changeBtn, 'btnActive')
        } else {
          removeClass(this.$refs.changeBtn, 'btnActive')
        }
      },
      toChange (obj) {
        this.tochangeshow = true
        this.id = this.$route.params.id
        this.$router.push({
          path: '/personal/familyMembers/'+this.id+'/changeInfo'
        })
        this.setTitle(obj.name)
        this.key = obj.key
      },
      handleRoute () {
        let path = this.$route.path
        let id = this.$route.params.id
        if (path.indexOf('changeInfo') > -1) {
          this.tochangeshow = true
        } else if (path.indexOf('changeInfo') == -1 && id){
          this.tochangeshow = false
          this.setTitle(this.currentMember.name)
        }
      },
      ...mapMutations({
        setTitle: 'SET_TITLE',
        setAddNewMember: 'SET_ADD_NEW_MEMBER'
      })
    },
    watch: {
      '$route'(to, from) {
        this.handleRoute()
        this.findCurrentMember()
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";

  .memberDetail{
    background-color: $bc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 150;
    .detail-wrapper{
      margin-top: 20px;
      background-color: #ffffff;
      padding-left: 27px;
      .detail{
        .item{
          border-bottom: 1px solid $borderCor;
          @include font-dpr(24px);
          line-height: 80px;
          padding-right: 30px;
          color: #939393;
          .content{
            display: flex;
            align-items: center;
            .project{
              flex: 1;
              text-align: left;
              color: #454545;
            }
            .info{
              display: flex;
              align-items: center;
              img{
                width: 30px;/*px*/
                height: 30px;/*px*/
                margin-left: 16px;
              }
            }
          }
          &:last-child{
            border: none;
          }
        }
      }
    }
    .btn-wrapper{
      margin: 15px 18px;
      overflow: hidden;
      .btn{
        margin-top: 20px;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        @include font-dpr(28px);
        line-height: 70px;
        text-align: center;
      }
      .first{
        background-color: $btnCor;
        color: #ffffff;
        &:active{
          background-color: $btnActiveCor;
        }
      }
      .second{
        background-color: #ffffff;
        color: #ea3323;
        &:active{
          background-color: #e5e5e5;
        }
      }
    }
    .changeBox{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: $bc;
      z-index: 200;
      .input-wrapper{
        margin-top: 28px;
        .input{
          border: none;
          background-color: #ffffff;
          outline: none;
          width: 100%;
          padding: 0 40px;
          @include font-dpr(28px);
          line-height: 80px;
        }
      }
      .remind{
        line-height: 60px;
        @include font-dpr(24px);
        color: #9f9f9f;
        text-align: left;
        padding: 0 36px;
      }
      .btn{
        background-color: #c7c7c7;
        color: #ffffff;
        @include font-dpr(28px);
        line-height: 90px;
        border-radius: 10px;
        margin: 10px 36px;
      }
      .btnActive{
        background-color: $btnCor;
        &:active{
          background-color: $btnActiveCor;
        }
      }
    }
  }
  .changeInfo-enter-active, .changeInfo-leave-active{
    transition: all 0.3s ease;
  }
  .changeInfo-enter, .changeInfo-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .changeInfo-leave, .changeInfo-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
